<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="<%=request.getContextPath()%>/statics/js/vue.js"></script>
    <script src="<%=request.getContextPath()%>/statics/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name">
    <button @click="show">查询</button>
    <button @click="add">添加客户</button>
    <table border="1px">
        <tr>
            <th>序号</th>
            <th>客户</th>
            <th>联系人</th>
            <th>电话</th>
            <th>日期</th>
            <th>操作</th>
        </tr>
        <tr v-for="(cus,index) in cusList">
            <th>{{index+1}}</th>
            <th>{{cus.name}}</th>
            <th>{{cus.linkman}}</th>
            <th>{{cus.phone}}</th>
            <th>{{cus.createdate}}</th>
            <th>
                <button type="button" @click="del(cus.id)">删除</button>
                <button type="button" @click="goUpd(cus.id)">修改</button>
            </th>
        </tr>
    </table>
</div>
</body>
</html>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:"",
            cusList:[],
            cus:{
                id:"",
                name:"",
                linkman:"",
                phone:"",
                createdate:"",
            }
        },
        mounted:function () {
            this.show();
        },
        methods: {
            show:function(){
                axios.get(
                    "http://localhost:8080/shiro_ssm_war_exploded/cus/findAll.html",
                    {
                        params:{name:this.name}
                    }
                ).then(res=>{
                    console.log(res.data);
                    vm.cusList=res.data;
                }).catch(err=>{
                    console.log(err);
                })
            },
            add:function () {
                window.location.href="<%=request.getContextPath()%>/cus/goAdd.html";
            },
            del:function (id) {
                console.log(id);
                axios.get(
                    "http://localhost:8080/shiro_ssm_war_exploded/cus/del.html",
                    {
                        params:{id:id}
                    }
                ).then(res=>{
                    console.log(res.data);
                    window.location.reload();
                }).catch(err=>{
                    console.log(err);
                })
            },
            goUpd:function (id) {
                window.location.href="<%=request.getContextPath()%>/cus/goUpd.html?id="+id;
            },
            findOne:function (arg) {
                axios.get(
                    "http://localhost:8080/shiro_ssm_war_exploded/cus/findOne.html",
                    {
                        params:{id:arg}
                    }
                ).then(res=>{
                    console.log(res.data.name+"%%%%%%%%%%%%%%%%%%%%");
                    $("[name=id]").val(res.data.id);
                    $("[name=name]").val(res.data.name);
                    $("[name=linkman]").val(res.data.linkman);
                    $("[name=phone]").val(res.data.phone);
                    $("[name=createdate]").val(res.data.createdate);
                }).catch(err=>{
                    console.log(err);
                })
            }
        }
    });
    function update() {
        axios.post(
            "http://localhost:8080/shiro_ssm_war_exploded/cus/update.html",
            {
                id:vm.cus.id,
                name:vm.cus.name,
                linkman:vm.cus.linkman,
                phone:vm.cus.phone,
                createdate:vm.cus.createdate,
            }, {
                headers: {'Content-Type':'application/json'}
            }
        ).then(res=>{
            console.log(res.data);
            window.alert(res.data);
            window.location.reload();
        }).catch(err=>{
            console.log(err);
        })
    }
</script>